{% extends "smErp/base.html" %}

{% block css_style %}
    {% load staticfiles %}
    <link href="{% static 'smErp/css/register.css' %}" type="text/css" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="inner wrp">
        <div class="container_box cell_layout">
            <div class="processor" id="step">
                <ol>
                    {% if user_info %}
                    <li id="set1" class="complete size1of3">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step"></i>
                            <h4>填写基本信息</h4>
                        </div>
                    </li>
                    <li id="set2" class="current size1of3">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">2</i>
                            <h4>邮箱激活</h4>
                        </div>
                    </li>
                    {% else %}
                    <li id="set1" class="current size1of3">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">1</i>
                            <h4>填写基本信息</h4>
                        </div>
                    </li>
                    <li id="set2" class="size1of3">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">2</i>
                            <h4>邮箱激活</h4>
                        </div>
                    </li>
                    {% endif %}
                    <li id="set3" class="size1of3">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">3</i>
                            <h4>完善企业资料</h4>
                        </div>
                    </li>
                    <li id="set4" class="size1of3 last">
                        <div class="step_line"></div>
                        <div class="step_inner">
                            <i class="icon_step">4</i>
                            <h4>企业资料审核</h4>
                        </div>
                    </li>
                </ol>
            </div>

            <div class="step_panel">
                {%  if user_info %}
                    <div class="regist_box base_info" id="step1" style="display: none;">
                    {% else %}
                    <div class="regist_box base_info" id="step1">
                {% endif %}
                    <form class="form" id="baseForm" novalidate="novalidate">
                        {% csrf_token %}
                        <div class="frm_control_group">
                            <label for="" class="frm_label">邮箱</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id='email' class="frm_input" name="email" type="email">
                                </span>
                                <p class="frm_tips">作为登录帐号，填写未被注册绑定的邮箱</p>
                                <p id="email-msg" class="frm_tips hider"></p>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">密码</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id="passwd" class="frm_input" name="passwd" type="password">
                                </span>
                                <p class="frm_tips">密码必须包含数字、字母，区分大小写，最短8位，区分大小写</p>
                                <p id="passwd-msg" class="frm_tips hider"></p>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">再次输入密码</label>
                            <div class="frm_controls">
                                <span class="frm_input_box">
                                    <input id="repwd" class="frm_input" name="repwd" type="password">
                                </span>
                                <p id="repwd-msg" class="frm_tips hider"></p>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label">验证码</label>
                            <div class="frm_controls verifycode" id="verify-box">
                                <span class="frm_input_box">
	                                <input id="verify" name="verify" class="frm_input" type="text">
                                </span>
                                <p class="verify_img_wrp">
                                    <img id="verify_code" onclick="this.setAttribute('src','/smErp/captcha/?nocache='+Math.random());" src="{% url "smErp:captcha" %}" alt="Captcha">
                                    <a href="javascript:;" class="changeVerifyCode">换一张</a>
                                </p>
                                <p id="verify-msg1" class="verify_msg fail jsVerifyNull" style="display: none;">
                                    <span class="verify_msg_content" style="display: inline;">请输入验证码</span>
                                </p>
                                <p id="verify-msg2" class="verify_msg fail jsVerifyNull" style="display: none;">
                                    <span class="verify_msg_content" style="display: inline;">验证码错误</span>
                                </p>
                            </div>
                        </div>

                        <div class="frm_control_group">
                            <label for="" class="frm_label"></label>
                            <div class="frm_controls">
                                <label class="frm_checkbox_label" for="js_agree">
                                    <input id="js_agree"  type="checkbox">
{#                                    <i class="icon_checkbox"></i>#}
                                    <span class="lbl_content">我同意并遵守上述的
                                        <a class="unline-a" href="{% url "smErp:user_protocol" %}" target="_blank">《平台者服务协议》</a>
                                    </span>
                                </label>
                            </div>
                        </div>

                        <div class="tool_bar border with_form">
                            <btn href="javascript:;" class="btn btn_disabled" id="nextBt">下一步</btn>
                        </div>
                    </form>
                </div>
                {%  if user_info %}
                    <div class="regist_box mail_active" id="step2">
                {% else %}
                    <div class="regist_box mail_active" style="display:none" id="step2">
                {% endif %}
                    <div class="page_msg simple default">
                        <div class="inner">
                            <div class="msg_icon_wrp"> <i class="icon_msg mail"></i>
                            </div>
                            <div class="msg_content">
                                <h4>
                                    感谢注册，确认邮件已发送至你的注册邮箱 :
                                    <span id="emailTxt">{{ user_info.email }}</span>
                                </h4>
                                <p>请进入邮箱查看邮件，并激活平台帐号。</p>

                                {% if user_info %}
                                <p class="spacing">
                                    <a href="{{ email_server  }}"  class="btn btn_primary">登录邮箱</a>
                                </p>
                                     <li>
                                        <a class="unline-a" href="javascript:;" id="reSendMail">重新发送激活邮件</a>
                                    </li>
                                {% else %}
                                <p class="spacing">
                                    <a href="javascript:;" id="goEmail" class="btn btn_primary">登录邮箱</a>
                                </p>
                                <p>没有收到邮件？</p>
                                <ul>
                                    <li>1. 请检查邮箱地址是否正确，你可以返回
                                        <a class="unline-a" href="javascript:;" id="rewrite">重新填写</a>
                                    </li>
                                    <li>2. 检查你的邮件垃圾箱</li>
                                    <li>3. 若仍未收到确认，请尝试
                                        <a class="unline-a" href="javascript:;" id="reSend">重新发送</a>
                                    </li>
                                </ul>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
{% endblock %}

{% block footscript %}
    <script>

        var email_fg = false;
        var pass_fg = false;
        var rpass_fg = false;
        var verify_fg = false;
        function ckeck_input_info(){
            if(email_fg && pass_fg && rpass_fg && verify_fg){
                if($("#passwd").val() == $("#repwd").val()) {
                    return true;
                }
            }
            return false;
        }
        function getCookie(c_name)
        {
            if (document.cookie.length>0)
            {
                c_start=document.cookie.indexOf(c_name + "=");
                if (c_start!=-1)
                {
                    c_start=c_start + c_name.length+1;
                    c_end=document.cookie.indexOf(";",c_start);
                    if (c_end==-1) c_end=document.cookie.length;
                    return unescape(document.cookie.substring(c_start,c_end))
                }
            }
            return ""
        }
        $("#email").blur(function(){
            var email = $("#email").val();
            if(!email){
                $("#email-msg").css("color","red");
                $("#email-msg").html("请输入邮箱地址");
                $("#email-msg").show();
                email_fg = false ;
                return;
            }else{
                //todo 验证邮箱是否合法
                if(!check_email(email)){
                    $("#email-msg").css("color","red");
                    $("#email-msg").html("请输入正确格式的邮箱地址");
                    $("#email-msg").show();
                    email_fg = false ;
                    return;
                }
            }
            email_fg = true;
        }).focus(function(){
               $("#email-msg").hide();
        });

        $("#passwd").blur(function(){
            var passwd = $("#passwd").val();
            if(!passwd){
                $("#passwd-msg").css("color","red");
                $("#passwd-msg").html("请输入密码");
                $("#passwd-msg").show();
                pass_fg = false ;
                return;
            }else{
                // todo 密码必须是字母数字组合
                if(!check_password(passwd)){
                    $("#passwd-msg").css("color","red");
                    $("#passwd-msg").html("密码长度为8-16位,包含数字，字母的组合");
                    $("#passwd-msg").show();
                    pass_fg = false ;
                    return;
                }
            }
            pass_fg = true ;
        }).focus(function(){
               $("#passwd-msg").hide();
        });

        $("#repwd").blur(function(){
            var repwd = $("#repwd").val();
            if(!repwd){
                $("#repwd-msg").css("color","red");
                $("#repwd-msg").html("请再次输入密码");
                $("#repwd-msg").show();
                rpass_fg = false ;
                return;
            }else{
                if($("#passwd").val() != repwd){
                    $("#repwd-msg").css("color","red");
                    $("#repwd-msg").html("两次输入的密码不相同");
                    $("#repwd-msg").show();
                    rpass_fg = false ;
                    return;
                }
            }
            rpass_fg = true;
        }).focus(function(){
            $("#repwd-msg").hide();
        });

        $("#verify").blur(function(){
            var verify = $("#verify").val();
            console.log(verify);
            if(!verify){
                $("#verify-msg1").css("color","red");
                $("#verify-msg1").show();
                $("#verify-msg2").hide();
                verify_fg = false ;
                return;
            }else{
                if(verify.length != 4){
                    $("#verify-msg2").css("color","red");
                    $("#verify-msg2").show();
                    $("#verify-msg1").hide();
                    verify_fg = false ;
                    return;
                }
            }
            verify_fg = true;
        }).focus(function(){
            $("#verify-msg1").hide();
            $("#verify-msg2").hide();
        });

        $("#js_agree").change(function(){
            if(!ckeck_input_info()){
                layer.msg("请填入正确信息");
                $(this).attr("checked",false);
                return;
            }
            var checkStatus = this.checked;
            if(checkStatus){
                // 按钮变成可选状态
                $("#nextBt").removeClass("btn_disabled");
                $("#nextBt").addClass("btn_primary");
            }else{
                $("#nextBt").removeClass("btn_primary");
                $("#nextBt").addClass("btn_disabled");
            }
        });
        $(".changeVerifyCode").on("click", function(){
            $("#verify_code").click();
        });

        $("#nextBt").on('click', function(){
            if($(this).hasClass("btn_primary")){
                // 下一步按钮
                var params = $("#baseForm").serialize();
                console.log(params);
                $.post("{% url 'smErp:register' %}", params,
                    function(data, satuts, xhr) {
                        if (data.result == 0) {
                            //alert(data.reason);
                            // 账号显示
                            $("#emailTxt").html( $("#email").val());
                            // 成功显示成功
                            $("#set2").addClass("current");
                            $("#set1").children(".step_line").css("background-color", "#44b549");
                            $("#step1").hide();
                            $("#step2").show();
                        } else {
                            // 替换验证码
                            $("#verify_code").click();
                            //提示层
                            layer.msg(data.reason);
                        }
                    },
                'json');
                }
        });
        // 登录邮箱
        $("#goEmail").on("click", function(){
            var url = "http://mail." + $("#email").val().split('@')[1];
            window.open(url);
        });
        // 重新填写
        $("#rewrite").on("click", function(){
            window.location.reload();
            // 成功显示成功
{#            $("#set2").addClass("current");#}
            /*$("#set1").children(".step_inner").children(".icon_step").html("1");
            $("#set1").addClass("current");
            $("#set1").removeClass("complete");
            $("#set2").removeClass("current");
            // $("#set1").children(".step_line").css("background-color", "#44b549");
            $("#set1").children(".step_line").css("background-color", "#c2c3c4");
            $("#step1").show();
            $("#step2").hide();*/
        });
        // 重发邮件
        $("#reSend").on("click", function(){
            var params = $("#baseForm").serialize();
                console.log(params);
                $.post("{% url 'smErp:register' %}", params,
                    function(data, satuts, xhr) {
                        if (data.result == 0) {
                            // 成功显示成功
                            layer.msg("重新发送邮件成功");

                        } else {
                            //提示层
                            layer.msg(data.reason);
                        }
                    },
                'json');
        });

        $("#reSendMail").on("click", function(){
           // 重发激活邮件
            $.ajax({
                type: 'POST',
                url: '{% url "smErp:resend_mail" %}',
                headers:{ "X-CSRFtoken":getCookie("csrftoken")},
                dataType: 'json',
                success: function(data){
                    if (data.result == 0) {
                        // 成功显示成功
                        layer.msg("重新发送邮件成功");
                    } else {
                        //提示层
                        layer.msg(data.reason);
                    }
                }
            });
        })
    </script>
{% endblock %}




